<script setup lang="ts">
import AddTopicCom from '../components/addTopicCom.vue'
import upload from '../../api/upload'
import clUpload from '../../components/cl-upload/components/cl-upload/cl-upload.vue'
import { addPostAPI, editPostAPI } from '@/api/posts'
const AddTopicComREF = ref()
const showPreview = ref(false)
import { getToken } from '@/utils/auth'
import cache from '@/utils/cache'
import TopicListCom from '@/components/topicList/topicList.vue'
import { usePubListStore } from '@/stores/publist'
import { getImgUrl } from '@/utils/util'
// import clUpload from '@/components/cl-upload/cl-upload/cl-upload.vue'
// 提交参数
const form = reactive<{
    type: number
    content: string
    pics: string[]
    topicIdList: string[]
    video: string
    videoFrame: string
}>({
    type: 1, // 1. 动态 2. 视频
    video: '',
    content: '', // 内容
    pics: [], // 图片
    topicIdList: [],
    videoFrame: '' // 视频首帧
})

//  提交发布
const submit = async () => {
    // AddTopicComREF.value.publish();
    if (!form.content) {
        uni.showToast({
            title: '发布内容不能为空',
            icon: 'none'
        })
        return
    }

    if (form.type == 1) {
        form.pics = list.value.map((item) => item.thumbnailFileName || item.fileName)
    } else {
        if (list.value[0]) {
            form.video = list.value[0].thumbnailFileName || list.value[0].fileName
            form.videoFrame = list.value[0].videoFrameFileName
        } else {
            uni.showToast({
                title: '请上传视频',
                icon: 'none'
            })
            return
        }
    }
    form.topicIdList = topicList.value.map((item) => item.id)

    const req = form.id ? editPostAPI : addPostAPI

    const res = await req(form)
    if (res.code === 0) {
        const str = form.id ? '编辑' : '发布'
        uni.showToast({
            title: `提交${str}成功,请等待审核`,
            icon: 'none'
        })
        // 清空
        form.id && (editPostInfo.value = null)
        form.content = ''
        list.value = []
        topicList.value = []
        usePubListStore().showPubList = false

        const t = setTimeout(() => {
            clearTimeout(t)
            uni.switchTab({
                url: '/views/home/index'
            })
        }, 1000)
    }
}
const editPostInfo = ref(null)
const topicList = ref<ITopic[]>([])
onLoad((op) => {
    console.log('oooo', op)
    form.type = op!.type || 1

    editPostInfo.value = uni.getStorageSync('editPost')
    if (editPostInfo.value) {
        // 删除本地缓存
        uni.removeStorageSync('editPost')

        // 话题 图片 内容
        form.content = editPostInfo.value.content
        form.id = editPostInfo.value.id
        topicList.value = editPostInfo.value.topicList
        list.value = editPostInfo.value.pics.map((item: string) => {
            return {
                path: getImgUrl(item),
                thumbnailFileName: item
            }
        })
    }
    console.log('editPostInfo', editPostInfo.value)
})

watch(
    () => topicList.value.length,
    () => {
        console.log('ssss', topicList.value)
    }
)
defineExpose({
    topicList
})

const list = ref<any[]>([])

const onSuccess = (data) => {
    list.value.push({
        ...data.data,
        path: data.data.url
    })
}
</script>

<template>
    <view class="box">
        <wxTopStatus background-color="#f2f3f7">
            <template #icon>
                <image mode="widthFix" :src="$getImg('/img/common/close.png')"></image>
            </template>

            <text class="title">发布</text>
        </wxTopStatus>
        <view class="content flex-column gap-[20rpx]">
            <!--      文字输入 and  图片  -->
            <view class="inp-text-img p-[20rpx]">
                <fui-textarea
                    v-model="form.content"
                    size="28"
                    maxlength="500"
                    counterSize="24"
                    minHeight="300rpx"
                    isCounter
                    trim
                    autoHeight
                    :border-bottom="false"
                    :borderTop="false"
                    placeholder="带话题发布，更容易获得曝光哦~"
                    :padding="[0, 0]"
                ></fui-textarea>

                <cl-upload
                    v-model="list"
                    :listStyle="{
                        columns: 3,
                        columnGap: '10rpx',
                        rowGap: '10rpx',
                        radius: '10rpx',
                        height: ''
                    }"
                    :headers="{
                        Authorization: `Bearer ${getToken()}`,
                        'CLIENT-TOC': 'Y',
                        'TENANT-ID': cache.getTenant() || '',
                        Language: cache.getLanguage().value
                    }"
                    :data="{
                        dir: '',
                        type: form.type == 1 ? 10 : 20
                    }"
                    :fileType="form.type == 1 ? 'image' : 'video'"
                    :imageFormData="{
                        count: 9 - list.length
                    }"
                    :maxVideo="1"
                    :action="$fileUrl + '/admin/sys-file/upload'"
                    @onSuccess="onSuccess"
                >
                    <!--                    <template v-slot:addImg>-->
                    <!--                        <view style="width: 100%">-->
                    <!--                            <image-->
                    <!--                                class="uploadImg"-->
                    <!--                                mode="widthFix"-->
                    <!--                                :src="$getImg('/img/common/uploadImg.png')"-->
                    <!--                            ></image>-->
                    <!--                        </view>-->
                    <!--                    </template>-->
                </cl-upload>

                <!--                <view class="img-list grid-3 gap-[10rpx]">-->
                <!--                    <image-->
                <!--                        v-for="(item, index) in imgList"-->
                <!--                        :key="index"-->
                <!--                        mode="aspectFit"-->
                <!--                        :src="item.url"-->
                <!--                        @click="preview(item, index)"-->
                <!--                    ></image>-->

                <!--                    <image-->
                <!--                        mode="aspectFit"-->
                <!--                        @click="upLoadFn"-->
                <!--                        :src="$getImg('/img/common/uploadImg.png')"-->
                <!--                        v-if="imgList.length < 9"-->
                <!--                    ></image>-->
                <!--                </view>-->
            </view>

            <!--  添加话题-->
            <view class="add-topic p-[20rpx]">
                <view class="box-header flex-between" @click="AddTopicComREF.show = true">
                    # 添加话题
                    <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                </view>

                <TopicListCom :list="topicList"></TopicListCom>
            </view>
            <fui-button radius="999rpx" @click="submit">
                发布{{ form.type == 1 ? '帖子' : '视频' }}
            </fui-button>
            <!--            <fui-safe-area></fui-safe-area>-->
        </view>

        <AddTopicCom ref="AddTopicComREF"></AddTopicCom>
    </view>
</template>

<style scoped lang="scss">
.uploadImg {
    width: 100%;
    aspect-ratio: 1/1;
    height: 100%;
}
.box {
    height: 100vh;
    background-color: #f2f3f7;

    .content {
        padding: 20rpx;

        .inp-text-img {
            background-color: #fff;
            border-radius: 10rpx;
            min-height: 500rpx;
            align-content: start;

            .img-list {
                image {
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 1 / 1;
                    border-radius: 10rpx;
                }
            }
        }

        .add-topic {
            background-color: #fff;
            border-radius: 10rpx;

            .box-header {
                font-weight: 700;
                font-size: 14px;
                padding-bottom: 20rpx;

                image {
                    width: 10rpx;
                }
            }
        }
    }
}

.title {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 700;
}
</style>
